<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
      integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
      integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
      crossorigin=""
    ></script>
		<script type="text/javascript" src="./js/libwind.min.js"></script>
	<script type="text/javascript" src="./js/leaflet.ChineseTmsProviders.js"></script>
	<!--纠偏-->
	<script type="text/javascript" src="./js/leaflet.mapCorrection.min.js"></script>

    <style>
	html,body{
		height: 100%;
        width: 100%;
		padding:0;
		margin:0;
	}
      #map {
        height: 100%;
        width: 100%;
      }
	  .current-point {
  width: auto;
  background: white;
  position: absolute;
  top: 100px;
  left: 500px;
  z-index: 1200;
  padding: 2px 5px;
  border-radius: 5px;
  margin: 15px;
}
.marker_timetip_3Jw {
  position: fixed;
  display: none;
  left: 50px;
  top: 10px;
  width: fit-content;
  box-sizing: content-box;
  z-index: 401;
  padding: 3px 10px;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.38);
  color: #fff;
  border-radius: 4px;
}
    </style>
  </head>
  <body>
    <div id="map"></div>
	 <div id="currentPoint" class="current-point">
      <div id="wind-value"></div>
      <div id="scale-value"></div>
    </div>
    <script>
    var map = L.map("map", {
        center: [39.905540,116.391330],
        zoom: 15,
        zoomControl: false
    });
    var gaodeMap = L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);
   //设置参照物
	 L.marker([39.905540,116.391330]).addTo(map).bindPopup('<p>我是WGS84坐标下，天安门广场国旗所在位置</p>');
	 addWindyLayer();
	 function addWindyLayer(){
		  let color = '#7390F8';
  //风场图层初始化
  windField = L.velocityLayer({
    colorScale: [color]
  });
  //风场数据加载
  L.windUtil().getImgData(new Date(), L.windUtil().options.products['wind'], function (res) {
    windField.setData(res);
    windField.addTo(map);
  });
  map.on('mousemove', function (e) {
    if (
      document.getElementById('wind-value').innerHTML == '' &&
      document.getElementById('scale-value').innerHTML == ''
    ) {
      document.getElementById('currentPoint').style.display = 'none';
    } else {
      document.getElementById('currentPoint').style.display = 'block';
    }
  });
	 }
    </script>
  </body>
</html>
